<script setup>
import { getWalletInfo, withdrawDeposit } from '@/api/my';
import { buttonClicked, myShowModalNoCancel, jump } from '@/utils/tool';

//定义响应式变量
const depositType = ref('免押金');
const withdrawStyle = ref({});
// const amountClass = ref('amount');
const buttonClickedState = ref(false);

//获取钱包数据
const initData = async () => {
  try {
    const res = await getWalletInfo();
    console.log('getWalletInfo---->获取钱包数据', res);
    const securityOrder = res.data;

    if (securityOrder == null || securityOrder.payWay == 'wechat_mini_fee') {
      withdrawStyle.value = { display: 'none' };
      // amountClass.value = 'amount';
    } else {
      depositType.value = '押金';
      withdrawStyle.value = {};
      // amountClass.value = '';
    }
  } catch (error) {
    console.error('获取钱包数据错误:', error);
  }
};

//用户点击提现
const withdraw = async () => {
  // 处理重复点击-默认两移后才能重新点击
  buttonClicked(buttonClickedState); // 处理重复点击
  try {
    const res = await withdrawDeposit();
    console.log('withdrawDeposit---->点击提现', res);
    if (!res) return;
    //提现成功
    if (res.code === 200) {
      myShowModalNoCancel('提现提示', '提现申请成功，详情请留意押金记录提现状态！', '好的', () => {
        jump('/pages/userCenter/userCenter');
      });
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    console.error('提现错误:', error);
  }
};

// 跳转押金记录
const securityOrder = () => {
  jump('/pages/securityOrder/securityOrder');
};

/**
 * 生命周期函数--监听页面挂载
 */
onMounted(() => {
  initData();
});
</script>

<template>
  <uni-card>
    <view class="deposit">
      <image class="img" src="@/static/images/icon_deposit.png"></image>
      <view style="width: 540rpx; display: flex; flex-direction: column">
        <view class="text_1">
          <view class="mydeposit">我的押金(RMB)</view>
          <view class="record" @click="securityOrder">押金记录</view>
          <image src="@/static/images/icon_arrownew.png" style="width: 25rpx; height: 25rpx; margin-top: 25rpx"></image>
        </view>
        <view class="text_2">
          <!-- :class="amountClass" -->
          <text style="margin-top: 40rpx; display: inline-block; color: #616169; text-decoration: line-through; font-size: 80rpx">99</text>
          <text style="display: inline-block; font-size: 30rpx; margin-left: 15rpx">{{ depositType }}</text>
        </view>
        <view>
          <view class="withdraw_My" @click="withdraw" :disabled="buttonClickedState" :style="withdrawStyle">提现</view>
        </view>
      </view>
    </view>
  </uni-card>
</template>

<style lang="scss">
// 定义变量
$light-color: #ececec;
$font-color-dark: rgba(97, 97, 105, 1);
.uni-card {
  border-radius: 20rpx !important;
}
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}
.deposit {
  display: flex;
  flex-direction: row;
  .img {
    margin: 20rpx 44rpx 0rpx 20rpx;
    width: 100rpx;
    height: 80rpx;
  }
  .text_1 {
    display: flex;
    .mydeposit {
      margin-top: 20rpx;
      width: 330rpx;
      height: 34rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: $font-color-dark;
    }
    .record {
      margin-top: 20rpx;
      width: 124rpx;
      height: 24rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: $font-color-dark;
    }
  }
  .text_2 {
    padding-top: 20rpx;
    width: 290rpx;
    height: 120rpx;
    font-size: 96rpx;
    font-weight: bold;
  }
  .withdraw_My {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50rpx 0 0 330rpx;
    width: 132rpx;
    height: 60rpx;
    font-size: 26rpx;
    font-weight: 400;
    border-radius: 30rpx;
    color: rgba(255, 255, 255, 1);
    background-color: #fe6019;
  }
}
</style>
